<template>
  <div class="personal-center-container">
    <el-row :gutter="20">
      <el-col :lg="8" :md="12" :sm="24" :xl="8" :xs="24">
        <el-card shadow="hover">
          <div class="personal-center-user-info">
            <!-- <el-avatar :size="100" :src="avatar" @click.native="openDialog" /> -->
            <el-avatar :size="100" :src="avatar" />
<!--            <div class="personal-center-user-info-full-name">-->
<!--              {{ form.fullName || ''}}-->
<!--            </div>-->
<!--            <div class="personal-center-user-info-description">-->
<!--              {{ form.description || ''}}-->
<!--            </div>-->

            <ul class="personal-center-user-info-list">
              <li>
                <vab-icon icon="user-3-line" />
                {{ userinfo.name || ''}}
              </li>
              <li>
                <vab-icon icon="phone-line" />
                {{ userinfo.phone }}
              </li>
              <li>
                <vab-icon icon="magic-line" />
                {{ userinfo.remark ? userinfo.remark : '没有相关介绍' }}
              </li>
              <li>
                <vab-icon icon="group-line" />
                滇约自动化测试平台
              </li>
              <!-- <li>
                <vab-icon icon="women-line" />
                女
              </li> -->
              <!-- <li>
                <vab-icon icon="community-line" />
                VAB集团 - PRO事业群 - 菜鸟技术部
              </li>
              <li>
                <vab-icon icon="map-pin-2-line" />
                中国 • 汉东省 • 京州市
              </li>
              <li>
                <vab-icon icon="code-s-slash-line" />
                JavaScript、HTML、CSS、Vue、Node
              </li>
              <li>
                <el-divider />
                <h5>个性标签</h5>
                <el-tag size="small">腹黑</el-tag>
                <el-tag size="small">怕麻烦</el-tag>
                <el-tag size="small">小仙女</el-tag>
                <el-tag size="small">仙气飘飘</el-tag>
              </li> -->
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="16" :md="12" :sm="24" :xl="16" :xs="24">
        <el-card shadow="hover">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="first">
              <el-col :lg="12" :md="16" :sm="24" :xl="12" :xs="24">
                <el-form ref="form" :model="form" label-width="100px">
                  <!-- <el-form-item label="头像">
                    <upload
                      :imgLimit="6"
                      :imgList="form.avatar"
                      @successPath="successLogo"
                    ></upload>
                  </el-form-item> -->
                  <el-form-item label="真实名字">
                    <el-input
                      v-model="form.name"
                      placeholder="请输入真实名字"
                      clearable
                    />
                  </el-form-item>
                  <!-- <el-form-item label="用户名">
                    <el-input v-model="form.username" />
                  </el-form-item> -->
                  <el-form-item label="手机号">
                    <el-input v-model="form.phone" placeholder="请输入手机号码" />
                  </el-form-item>
                  <el-form-item label="个人简介">
                    <el-input
                      v-model="form.remark"
                      type="textarea"
                      rows="5"
                      placeholder="请输入个人简介"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="rePassword">
              <el-col :lg="12" :md="16" :sm="24" :xl="12" :xs="24">
                <el-form
                  :model="ruleForm"
                  status-icon
                  :rules="rules"
                  ref="ruleForm"
                  label-width="100px"
                  class="demo-ruleForm"
                >
                  <el-form-item label="旧密码" prop="password">
                    <el-input
                      type="password"
                      v-model="ruleForm.password"
                      placeholder="请输入旧密码"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="新密码" prop="re_password">
                    <el-input
                      type="password"
                      v-model="ruleForm.re_password"
                      autocomplete="off"
                      placeholder="请输入新密码"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="确认新密码" prop="checkPass">
                    <el-input
                      type="password"
                      v-model="ruleForm.checkPass"
                      autocomplete="off"
                      placeholder="请再次输入新密码"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">
                      提交
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-col>
              <!-- <div class="personal-center-item">
                <vab-icon icon="qq-line" style="color: #3492ed" />
                <div class="personal-center-item-content">
                  <div>绑定QQ</div>
                  <div class="personal-center-item-content-second">
                    1204505056
                  </div>
                </div>
                <el-link type="primary">更换绑定</el-link>
              </div>
              <el-divider />
              <div class="personal-center-item">
                <vab-icon icon="wechat-line" style="color: #4daf29" />
                <div class="personal-center-item-content">
                  <div>绑定微信</div>
                  <div class="personal-center-item-content-second">
                    当前未绑定绑定微信账号
                  </div>
                </div>
                <el-link type="primary">更换绑定</el-link>
              </div>
              <el-divider />
              <div class="personal-center-item">
                <vab-icon icon="alipay-line" style="color: #1476fe" />
                <div class="personal-center-item-content">
                  <div>绑定支付宝</div>
                  <div class="personal-center-item-content-second">
                    当前未绑定绑定支付宝账号
                  </div>
                </div>
                <el-link type="primary">更换绑定</el-link>
              </div>
              <el-divider />
              <div class="personal-center-item">
                <vab-icon icon="weibo-line" style="color: #ffd440" />
                <div class="personal-center-item-content">
                  <div>绑定微博</div>
                  <div class="personal-center-item-content-second">
                    当前未绑定绑定微博账号
                  </div>
                </div>
                <el-link type="primary">更换绑定</el-link>
              </div>
              <el-divider />
              <div class="personal-center-item">
                <vab-icon icon="github-line" />
                <div class="personal-center-item-content">
                  <div>绑定Github</div>
                  <div class="personal-center-item-content-second">
                    当前未绑定绑定Github账号
                  </div>
                </div>
                <el-link type="primary">更换绑定</el-link>
              </div>
              <el-divider />
              <div class="personal-center-item">
                <vab-icon icon="paypal-line" style="color: #012e85" />
                <div class="personal-center-item-content">
                  <div>绑定Paypal</div>
                  <div class="personal-center-item-content-second">
                    当前未绑定绑定Paypal账号
                  </div>
                </div>
                <el-link type="primary">更换绑定</el-link>
              </div>
              <el-divider /> -->
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <vab-cropper ref="vabCropper" />
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import VabCropper from '@/extra/VabCropper'
import crypto from 'crypto'
import { resetPassword, setUserInfo, getUser_Info } from '@/api/user'
import { translateTitle } from '@/utils/i18n'
import { toLoginRoute } from '@/utils/routes'
import { removeToken } from '@/utils/token'
import upload from '@/components/imgUpload'
export default {
  name: 'PersonalCenter',
  components: { VabCropper, upload },
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入旧密码'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        } else if (value.length < 6) {
          callback(new Error('密码长度不得小于6位数'))
        } else {
          callback()
        }
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'))
      } else if (value !== this.ruleForm.re_password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      activeName: 'first',
      userinfo: JSON.parse(localStorage.getItem('userInfo')),
      form: {
        phone: '',
        avatar: '',
        name: '',
        remark: '',
      },
      ruleForm: {
        re_password: '', //新密码
        checkPass: '', //确认密码
        password: '', //旧密码
      },
      rules: {
        re_password: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
        password: [{ validator: checkAge, trigger: 'blur' }],
      },
    }
  },
  computed: {
    ...mapGetters({
      avatar: 'user/avatar',
    }),
  },
  mounted() {
    this.getUserinfo()
  },
  methods: {
    translateTitle,
    ...mapActions({
      _logout: 'user/logout',
    }),
    //获取用户信息
    async getUserinfo() {
      const data = await getUser_Info()
      if (data.code == 200) {
        this.form = data.data
        this.userinfo = data.data
      } else {
        this.$message.error(data.msg)
      }
    },
    //修改个人信息
    async onSubmit(formName) {
      let that = this
      const params = this.form
      const data = await setUserInfo(params)
      if (data.code == 200) {
        this.$message.success(data.userMsg)
        this.getUserinfo()
      } else {
        this.$message.error(data.userMsg)
      }
    },
    //修改密码
    async submitForm(formName) {
      let that = this
      this.ruleForm.password = this.getmd5(this.ruleForm.password)
      this.ruleForm.re_password = this.getmd5(this.ruleForm.re_password)
      const params = this.ruleForm
      const data = await resetPassword(params)
      if (data.code == 200) {
        this.$message.success('密码修改成功，请重新登录！')
        setTimeout(() => {
          that.logout()
        }, 1000)
      } else {
        this.$message.error(data.userMsg)
      }
    },
    //图片上传成功
    successLogo(path) {
      // let imageArr = path.split(',')
      this.form.delivery_images = path
    },
    openDialog() {
      this.$refs['vabCropper'].dialogVisible = true
    },
    getmd5: function (pwd) {
      var md5 = crypto.createHash('md5')
      md5.update(pwd)
      var password = md5.digest('hex')
      return password
    },
    async logout() {
      await this._logout()
      removeToken()
      await this.$router.push(toLoginRoute(this.$route.path))
    },
  },
}
</script>

<style lang="scss" scoped>
$base: '.personal-center';
#{$base}-container {
  padding: 0 !important;
  background: $base-color-background !important;

  #{$base}-user-info {
    padding: $base-padding;
    text-align: center;

    ::v-deep {
      .el-avatar {
        img {
          cursor: pointer;
        }
      }
    }

    &-full-name {
      margin-top: 15px;
      font-size: 24px;
      font-weight: 500;
      color: #262626;
    }

    &-description {
      margin-top: 8px;
    }

    &-follow {
      margin-top: 15px;
    }

    &-list {
      margin-top: 18px;
      line-height: 30px;
      text-align: left;
      list-style: none;

      h5 {
        margin: -20px 0 5px 0;
      }

      ::v-deep {
        .el-tag {
          margin-right: 10px !important;
        }

        .el-tag + .el-tag {
          margin-left: 0;
        }
      }
    }
  }

  #{$base}-item {
    display: flex;

    i {
      font-size: 40px;
    }

    &-content {
      box-sizing: border-box;
      flex: 1;
      margin-left: $base-margin;

      &-second {
        margin-top: 8px;
      }
    }
  }
}
</style>
